<template>
  <div v-if="icon" class="my-icon">
    <el-icon v-if="props.icon.includes('el')">
      <component :class="`${className}`" :style="`color:${color};width: ${size};height: ${size}`" :is="iconName" />
    </el-icon>
    <svg v-else :class="`${className}`" :style="`color:${color};width: ${size};height: ${size}`" aria-hidden="true">
      <use :xlink:href="iconName" />
    </svg>
    <slot />
  </div>
</template>

<script setup lang="ts" name="MyIcon">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    icon?: string
    color?: string
    className?: string
    size?: string
  }>(),
  {
    icon: '',
    color: '',
    className: '',
    size: '',
  }
)

// https://www.iconfont.cn 图标库需使用前缀 icon- 才能匹配
const iconName = computed(() => {
  if (props.icon.includes('el')) return props.icon.replace('el-', '')
  return `#icon-${props.icon.replace('icon-', '')}`
})
</script>

<style lang="scss" scoped>
$size: 1em;
.my-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    width: $size;
    height: $size;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    flex-shrink: 0;
  }
}
:deep().el-icon {
  width: $size;
  height: $size;
  margin: 0;
}
</style>
